<template>
	<view class="categoryContainer">
		<!-- 头部区域 -->
		<view class="header">
			<view class="search">搜索商品</view>
		</view>
		<!-- 内容区 -->
		<view class="contenContainer">
			<!-- 左侧内容区 -->
			<view class="leftContainer">
				<scroll-view scroll-y="true" class="navScroll">
					<view class="navItem" :class="{active: navIndex === index}" v-for="(item,index) in navData"
						:key="item.id" @click="changeIndex(index)">
						{{item.name}}
					</view>
				</scroll-view>
			</view>
			<!-- 右侧内容区 -->
			<view class="rightContainer">
				<scroll-view scroll-y="true" class="shopScroll">
					<!-- 每个标签对应的主图 -->
					<image :src="categoryObj.imgUrl" class="cateImg"></image>
					<!-- 下面那一堆图片 -->
					<view class="shopList" >
						<view class="shopItem" v-for="item in  categoryObj.subCateList" :key="item.id">
							<image class="shopImg" :src="item.wapBannerUrl"></image>
							<text class="shopName">{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//导航区的数据
				navData: [],
				//被选中的导航块的索引,默认选中第一个
				navIndex: 0
			};
		},
		computed: {
			//右侧联动的数据
			categoryObj() {
				//根据此时选中的索引取得此时选中的对象，
				return this.navData[this.navIndex]
			}
		},
		onLoad() {
			this.initNavData()
		},
		methods: {
			//加载导航区数据的方法
			async initNavData() {
				const {
					data
				} = await uni.$axios('/categoryDatas')
				this.navData = data
			},
			//选中导航块的方法
			changeIndex(index) {
				this.navIndex = index
			}
		}
	}
</script>

<style lang="stylus">
	.categoryContainer {
		.header {
			//内边距 上下10upx 左右0
			padding 10upx 0;

			.search {
				width 92%;
				height 60upx;
				text-align center;
				line-height 60upx;
				font-size 26upx;
				background-color #eeeeee;
				//外边距上下0，左右居中
				margin 0 auto;
			}
		}

		//内容区样式
		.contenContainer {
			//动态计算高度
			height calc(100vh - 80upx);
			display flex;
			border-top 1upx solid #eee;
			box-sizing border-box; //把边框算到宽度内

			.leftContainer {
				width 20%;
				height 100%;
				// background-color #006664;
				border-right 1upx solid #eee;
				box-sizing border-box; //把边框也算在宽度里面,不然就撑大了

				.navScroll {
					//计算高度 1vh = 1% * 视口高度， 下面的注释是解决整个页面晃动的问题的 
					//这个82upx其实就是header的80upx+contenContainer的1upx，虽然已经减掉了，但是还是有点影响，大概是js语言的限制导致计算不精确，所以还要多减去1upx
					height calc(100vh - 82upx);

					.navItem {
						//绝对定位
						position relative;
						font-size 26upx;
						height 80upx;
						line-height 80upx; //行高80upx
						text-align center; //居中

						//配合父元素的 position relative;使用
						&.active::before {
							//采用伪元素的方式加这个点击的样式
							//绝对定位
							position absolute;
							top 10upx;
							left 6upx;
							content "";
							width 6upx;
							height 60upx;
							background-color #BB2C08;
						}
					}
				}
			}

			.rightContainer {
				width 80%;
				height 100%;

				// background-color #999999; //注释背景颜色
				.shopScroll {
					height calc(100vh - 82upx);

					.cateImg {
						width 520upx;
						height 190upx;
						display block; //image元素不能给margin 所以转换为块元素
						margin 10upx auto;
					}

					.shopList {
						display flex;
						flex-wrap wrap;

						.shopItem {
							width 33.333%;
							text-align center; //文字和图片都居中

							.shopImg {
								height 144upx;
								width 90%;
							}

							.shopName {
								font-size 24upx;
							}
						}
					}
				}
			}
		}
	}
</style>
